<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue-admin</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<!-- element-ui引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- element-ui引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <!-- form-inline表示所有的组件在一行上-->
    <div class="panel-body form-inline">
      <label>
          name:<input type="text" v-model="name" class="form-control">
      </label>
      <label>
          time:
          <!--element-ui时间组件-->
                <el-date-picker
                  v-model="time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
       </label>
        <button type="button" class="btn btn-primay" @click="add">添加</button> 
        <label>
            按关键字搜索:<input type="text" v-model="keywords" class="form-control">
        </label>
        <!--element-ui对话框-->
        <el-dialog title="文章" :visible.sync="dialogFormVisible" :before-close="close">
          <div >
              name:<input type="text" v-model="from.name" class="form-control">
              time:
              <el-date-picker
                  v-model="from.time" 
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  >
                </el-date-picker>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>time</th>
          <th>opt</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in search(keywords)" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.time}}</td>
          <td>
            <a href=""  @click.prevent="del(item.id)" >删除</a>
            <el-button type="text" @click="edit(item)">修改</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <div class="panel panel-default">
      <!--  style="text-align: center"将分页组件居中显示-->
        <div class="panel-body form-inline container" style="text-align: center"> 
            <el-pagination
            @current-change="handleCurrentChange"
           :current-page.sync="currentPage1"
           :page-size="pageSize"
           layout="prev, pager, next"
           :total="total">
           </el-pagination>
        </div>
    </div>
    
    <!--警告框-->
    <div class="alert alert-success" role="alert" v-show="flag">
      <a href="#" class="alert-link">请求异常</a>
    </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    flag:false,
    name:"",
    pageSize:10,
    total:100,
    time:"",
    list:[],
    keywords:"",
    dialogFormVisible:false,
    currentPage1:1,
    from:{id:"",name:"",time:""}
  },
  created() {
    this.getList(this.currentPage1,this.pageSize);
  },
  methods: {
    getList(pageNo,pageSize){
      this.$http.get("http://127.0.0.1:8080/article/list?pageNum="+pageNo+"&pageSize="+pageSize).then(result=>{
        var data=result.body;
        if(data.code===200){
          this.list=data.data.rows;
          this.total=data.data.total;
          this.currentPage1=data.data.pageNo;
          this.pageSize=data.data.pageSize;
        }else{
          alert(data.msg);
        }
      });
    },
    add(){
      var obj={name:this.name,time:this.time};
      this.$http.post("http://127.0.0.1:8080/article",obj).then(result=>{
        var data=result.body;
        if(data.code===200){
          //element-ui消息框
          this.$message({message:'添加成功',duration:1000});
          this.getList(this.currentPage1,this.pageSize);
          this.name="";
          this.time="";
        }else{
          alert(data.msg);
        }
      });
    },
    del(id){
      this.$http.delete("http://127.0.0.1:8080/article/"+id).then(result=>{
        var data=result.body;
        if(data.code===200){
          this.getList(this.currentPage1,this.pageSize);
        }else{
          alert(data.msg);
        }
      });
    },
    search(keywords){
      var newList=[];
      this.list.forEach(data => {
        if(data.name.indexOf(keywords)!=-1){
          newList.push(data);
        }
      });
      return newList;
    },
    edit(item){
      this.dialogFormVisible = true;
      this.from=item;
    },
    update(){
      this.dialogFormVisible = false;
      this.$http.put("http://127.0.0.1:8080/article/"+this.from.id,this.from).then(result=>{
        var data=result.body;
        if(data.code===200){
          this.getList(this.currentPage1,this.pageSize);
        }else{
          alert(data.msg);
        }
      });
    },
    handleCurrentChange(currentPage1){
      this.currentPage1=currentPage1;
      this.getList(this.currentPage1,this.pageSize);
    },
    close(){
      this.dialogFormVisible=false;
    }
  },
})
</script>
 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>